﻿
    body {
        padding-top:50px;
        text-align:center; 
    }
    
    

    .menuDiv {
        border: 5px solid #4CAF50;
        overflow: hidden;
        display:inline-block;
    }
    

    .menuDiv a {
        text-decoration: none;
        display:block;
        width:60px;
    }


    .menuDiv ul , .menuDiv li {
        list-style-tupe: none;
        margin: 0;
        padding: 0;
        width: 120px;
        background-color: rgba(245,245,245,0.42);
        float: left;
    } 
    

    .menuDiv > ul > li > ul {
        position: relative;
        display: none;
    }

    .menuDiv > ul > li > ul > li {
        float: none;
    }
  

    .menuDiv > ul > li:hover ul {
        color: #4CAF50;
        display: block;
    }


    .menuDiv > ul > li > a {
        width: 120px;
        line-height: 40px;
        color: black;
        background-color: #cfe;
        text-align: center;
        border: 2px solid #cccccc;
        display: block;


    }
    

    .menuDiv > ul > li:first-child > a {
        border-left: none;
        border-bottom: none;
        border-right: none;
        border-top: none;
    }
       li a.active {
        background-color: #4CAF50;
        color: black;
    }

    .menuDiv > ul > li > a:hover{
        color: #f0f;
        background-color: #bcf;
    }

  
    .menuDiv > ul > li > ul > li > a {
        width: 120px;
        line-height: 36px;
        color: #4CAF50;
        background-color: white;
        text-align: center;
        border: 1px solid white;
        border-top: none;
        display: block;
    }
    

    .menuDiv > ul > li > ul > li > a {
        border: 1px solid #ccc;
    }

    